<!--
- Author:  LiShibin.
- Date:    2018/4/9 0009.
- File:    index.
-->
<template>
  <div class="pb86">
    <div class="MyCouponsbox2">
      <div class="MyCoupons2" style="margin-top: 10px;" v-show="type == '1'">
        <ul>
          <li class="Couponsblock2 f-cb" v-if="couponInfo">
            <div class="couponleft">
              <div class="heads"><img src="../../assets/images/logo-img.png"></div>
              <div class="storename"  style="height: 100px; position: relative;">
                <h3 style="height: auto; max-height: 1.8rem"><span class="Preferentiallabel" v-show="couponInfo.coupon_type == '1'">满减</span><span class="Preferentiallabel" v-show="couponInfo.coupon_type == '2'">立减</span>{{couponInfo.coupon_abstract}}</h3>
                <p class="Amounts" style="padding-top: 0;"><span>{{couponInfo.coupon_amount}}</span><template v-if="couponInfo.coupon_type == '1'">满{{couponInfo.coupon_need_amount}}元可用</template></p>
                <p style="padding-top: 0" v-show="couponInfo.use_start_time != '0' && couponInfo.use_end_time != '0'">{{couponInfo.use_start_time | timestampToDate('yyyy-MM-dd')}} - {{couponInfo.use_end_time | timestampToDate('yyyy-MM-dd')}}</p>
                <div style="position: absolute; bottom: 0; width: 90%; height: 25px; font-size: 12px; border-top: 1px dashed #aaa; line-height: 25px;" @click="toggleRangeShow(couponInfo)">详细信息<i v-show="couponInfo.rangeShow" class="iconfont icon-up" style="float: right"></i><i v-show="!couponInfo.rangeShow" class="iconfont icon-down-copy" style="float: right"></i></div>
              </div>
            </div>
            <div class="couponright" style="padding-top: 25px;">
              <i class=" iconfont icon-yuandianzhong icontop"></i>
              <i class=" iconfont icon-yuandianzhong iconbottom"></i>
              <div class="receive" :style="{background: couponInfo.get_num_limit == 0 || parseInt(couponInfo.get_num) < parseInt(couponInfo.get_num_limit) ? '' : '#aaa'}" @click="receiveCoupon(couponInfo)"><span v-if="couponInfo.get_num_limit == 0 || parseInt(couponInfo.get_num) < parseInt(couponInfo.get_num_limit)">立即<br>领取</span><span v-else style="line-height: 1.5rem;">已领取</span></div>
            </div>
            <div style="padding: 10px 5px; margin-top: 110px;" v-show="couponInfo.rangeShow">使用范围：
              <span v-for="item in couponInfo.goods_list" @click="gotoUseCoupon(item)" style=" display: inline-block; margin: 2px 2px 2px 0; padding: 2px 5px 2px 0; border-radius: 5px; font-size: 12px;">{{item.target_name}}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="MyCoupons2" style="margin-top: 10px;" v-show="type == '2'">
        <ul>
          <li class="Couponsblock2 f-cb" v-if="couponPackInfo">
            <div class="couponleft">
              <div class="heads"><img src="../../assets/images/logo-img.png"></div>
              <div class="storename">
                <h3>{{couponPackInfo.pack_name}}</h3>
                <p class="Amounts" @click="showCouponPackDetail(couponPackInfo)">查看详情</p>
              </div>
            </div>
            <div class="couponright" style="padding-top: 25px;">
              <i class=" iconfont icon-yuandianzhong icontop"></i>
              <i class=" iconfont icon-yuandianzhong iconbottom"></i>
              <div class="receive" :style="{background: couponPackInfo.get_num_limit == 0 || parseInt(couponPackInfo.get_num) < parseInt(couponPackInfo.get_num_limit) ? '' : '#aaa'}" @click="receiveCouponPack(couponPackInfo)"><span v-if="couponPackInfo.get_num_limit == 0 || parseInt(couponPackInfo.get_num) < parseInt(couponPackInfo.get_num_limit)">立即<br>领取</span><span v-else style="line-height: 1.5rem;">已领取</span></div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="coupbg" style="display: block;" v-show="couponPackDetailShow">
      <div class="coupon_box" style="max-height: 20rem; overflow-y: scroll" v-if="couponPackInfo">
        <h3>{{couponPackInfo.pack_name}}</h3>
        <div class="MyCoupons mt20">
          <ul>
            <li class="Couponsblock f-cb" v-for="coupon in couponPackDetail.data">
              <div class="couponright">
                <!--<i class=" iconfont icon-yuandianzhong icontop"></i>-->
                <!--<i class=" iconfont icon-yuandianzhong iconbottom"></i>-->
                <h3><span>{{coupon.coupon_amount}}</span></h3>
                <p v-show="coupon.coupon_type == '1'">满{{coupon.coupon_need_amount}}元可用</p>
                <p style="padding-top: 0" v-show="coupon.use_start_time != '0' && coupon.use_end_time != '0'">{{coupon.use_start_time | timestampToDate('yyyy-MM-dd')}} - {{coupon.use_end_time | timestampToDate('yyyy-MM-dd')}}</p>
              </div>
              <div class="couponleft" style="height: 90px; position: relative">
                <div class="storename">
                  <h3 style="padding: 0">{{coupon.coupon_abstract}}</h3>
                  <p style="padding-top: 0" v-show="coupon.use_start_time != '0' && coupon.use_end_time != '0'">{{coupon.use_start_time | timestampToDate('yyyy-MM-dd')}} - {{coupon.use_end_time | timestampToDate('yyyy-MM-dd')}}</p>
                  <div style="position: absolute; bottom: 0; width: 85%; height: 25px; font-size: 12px; border-top: 1px dashed #aaa; line-height: 25px;" @click="toggleRangeShow(coupon)">详细信息<i v-show="coupon.rangeShow" class="iconfont icon-up" style="float: right"></i><i v-show="!coupon.rangeShow" class="iconfont icon-down-copy" style="float: right"></i></div>
                </div>
              </div>
              <div style="padding: 10px 5px; margin-top: 90px;" v-show="coupon.rangeShow">使用范围：
                <span v-for="item in coupon.goods_list" @click="gotoUseCoupon(item)" style=" display: inline-block; margin: 2px 2px 2px 0; padding: 2px 5px 2px 0; border-radius: 5px; font-size: 12px;">{{item.target_name}}</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="c_btn" @click="hideCouponPackDetail">关闭</div>
      </div>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        id: this.$route.query.id || this.$utils.getQueryString('id'),
        type: this.$route.query.type || this.$utils.getQueryString('type') || '1', // 1: 优惠券 2：礼包
        couponInfo: null,
        couponPackInfo: null,
        couponPackDetailShow: false,
        couponPackDetail: {requested: false, data: []}
      }
    },
    components: {},
    created() {
      if (this.type == '1') {
        this.getStoreCouponInfo()
      } else if (this.type == '2') {
        this.getStoreCouponPackInfo()
      }
    },
    computed: {
    },
    watch: {
      $route () {
        this.type = this.$route.query.type
      }
    },
    methods: {
      getStoreCouponInfo() {
        this.$request.getStoreCouponInfo(this.id).then(data => {
          data.rangeShow = false
          this.couponInfo = data
        }).catch(e => {
          this.$toast(e.msg)
        })
      },
      getStoreCouponPackInfo() {
        this.$request.getStoreCouponPackInfo(this.id).then(data => {
          data.rangeShow = false
          this.couponPackInfo = data
        }).catch(e => {
          this.$toast(e.msg)
        })
      },
      gotoUseCoupon(item) {
        if (item.type == 'all_gc') {
          this.$router.push({name: 'goods-classify'})
        } else if (item.type == 'all_stc') {
          this.$router.push({name: 'goods-classify', query: {id: item.target_id}})
        } else if (item.type == 'goods') {
          this.$router.push({name: 'goods-detail', params: {id: item.target_id}})
        }
      },
      showCouponPackDetail(couponPack) {
        this.couponPackDetailShow = true
        this.getCouponPackDetail(couponPack.cp_id)
        this.$utils.addBodyFix() // 显示模态框，防止滚动模态框里的div时body也滚动
      },
      hideCouponPackDetail() {
        this.couponPackDetail = {requested: false, data: []}
        this.couponPackDetailShow = false
        this.$utils.removeBodyFix()
      },
      switchType(type) {
        this.$router.replace({name: 'coupon-index', query: {type: type}})
      },
      toggleRangeShow(coupon) {
        coupon.rangeShow = !coupon.rangeShow
      },
      getCouponPackDetail(id) {
        let params = {cp_id: id, coupon_type: 0, store_id: 0, sortType: 1, desc: 1}
        this.$request.getStoreCouponList(params).then(data => {
          for (let i = 0; i < data.length; i++) {
            data[i].rangeShow = false
          }
          this.couponPackDetail.data = [...this.couponPackDetail.data, ...data]
        }).finally(() => {
          this.couponPackDetail.requested = true
        })
      },
      receiveCouponPack(couponPack) {
        this.$request.receiveCouponPack(couponPack.cp_id).then(data => {
          this.$toast('领取成功')
          couponPack.get_num ++
        }).catch(e => {
          this.$toast('领取失败：' + e.msg)
        })
      },
      receiveCoupon(coupon) {
        this.$request.receiveCoupon(coupon.coupon_id).then(data => {
          this.$toast('领取成功')
          coupon.get_num ++
        }).catch(e => {
          this.$toast('领取失败：' + e.msg)
        })
      }
    }
  }
</script>

<style>

</style>